<template>
  <div>
    <a-form-model ref="form" :model="sku" :rules="rules">
      <a-form-model-item
        label="所属分类"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryId"
        align="left"
      >
        <category-select ref="CategorySelect" @selectedCategory="getCategoryData" :categoryId="this.sku.categoryId" />
      </a-form-model-item>
      <a-form-model-item
        label="分类编码"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryCode"
        align="left"
      >
        <a-input placeholder="请选择分类" v-model="sku.categoryCode" :disabled="true"/>
      </a-form-model-item>
      <a-form-model-item
        label="分类名称"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryName"
        align="left"
      >
        <a-input placeholder="请选择分类" v-model="sku.categoryName" :disabled="true"/>
      </a-form-model-item>
      <a-form-model-item
        label="spu名称"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="spuCode"
        align="left"
      >
        <a-select
          v-model="sku.spuCode"
          show-search
          placeholder="请选择spu"
          option-filter-prop="children"
          :filter-option="filterOption"
          @change="handleSpuChange"
        >
          <a-select-option v-for="d in spuList" :key="d.spuId">
            {{ d.spuName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="SPU名称"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="spuName"
        align="left"
      >
        <a-input placeholder="请选择spu" v-model="sku.spuName" :disabled="true"/>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import CategorySelect from '@/components/wms/categorySelect.vue'
import { listSpu } from '@/api/wms/base/spu'

export default {
  name: 'SkuForSpu',
  components: { CategorySelect },
  props: {},
  data () {
    return {
      open: false,
      // 状态
      skuStatusOptions: [],
      spuList: [],
      sku: {
        skuName: undefined,
        spuId: undefined,
        spuCode: undefined,
        spuName: undefined,
        categoryId: undefined,
        categoryCode: undefined,
        categoryName: undefined,
        categoryFullName: undefined,
        skuStatus: undefined
      },
      rules: {
        spuCode: [{ required: true, message: 'spu不能为空', trigger: 'blur' }],
        categoryId: [{ required: true, message: '分类不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    // 选择所属分类
    getCategoryData (data) {
      this.sku.categoryId = data.categoryId
      this.sku.categoryCode = data.categoryCode
      this.sku.categoryName = data.categoryName
      this.sku.categoryFullName = data.categoryFullName
      this.fetchSpu(data.categoryId)
    },
    // 查找SPU
    fetchSpu (categoryId) {
      this.data = []
      listSpu({ 'categoryId': categoryId }).then(res => {
        this.spuList = res.data
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // spu选择
    handleSpuChange (obj) {
      const spu = this.spuList.filter(item => item.spuId === obj)
      if (spu.length > 0) {
        this.sku.spuId = spu[0].spuId
        this.sku.spuCode = spu[0].spuCode
        this.sku.spuName = spu[0].spuName
      }
    },
    // 获取skuspu信息
    getSkuSpu () {
      return this.sku
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>,
